<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>星龙Cloud</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js"></script>
		<script src="js/jquery.min.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			body {
				background-size:cover;
				background-image: url('img/bg04.jpg');
				background-repeat: no-repeat;
				padding: 0;
				margin: 0;
				overflow: hidden;
			}

			.el-header,
			.el-footer {
				color: #333;
				text-align: center;
				line-height: 60px;
				padding: 0;
			}

			.el-menu {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.el-main {
				color: #333;
				text-align: center;
			}

			#never {
				margin: 0px;
				padding: 0px;
			}

			.p1 {
				width: 60%;
				margin-left: 20%;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.p1 h1 {
				padding: 20px 50px;
				color: white;
				background: #00000020;
				letter-spacing: 3px;
				text-shadow: 0 0 5px #545454;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.el-footer {
				position: absolute;
				bottom: -20px;
				left: 0;
				z-index: 1;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #00000040;
				color: white;
			}

			.el-footer img {
				width: 20px;
				height: 20px;
			}

			.bottom_1,
			.bottom_2 {
				height: 40px;
				font-size: 15px;
			}

			.bottom_2 a {
				position: relative;
				top: -30px;
				color: white;
			}

			.el-menu--horizontal>.el-menu-item>strong,
			.el-menu--horizontal>.el-submenu .el-submenu__title>strong {
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.kefu {
				position: fixed;
				bottom: 210px;
				right: 25px;
				z-index: 9999;
			}

			.kefu img {
				width: 50px;
				height: 50px;
				padding: 2px;
				background: #00000030;
				border-radius: 50%;
			}

			.el-table {
				margin-left: 190px;
				opacity: .85;
				border-radius: 20px;
				overflow: hidden;
			}
			.el-pagination button:disabled , .el-dialog, .el-pager li , .el-dialog, .el-pager li , .el-input__inner{
				background: #ffffff40;
			}
			.el-pagination__total , .el-pagination button:disabled , .el-pagination__jump , .el-pager li.active{
				color: black;
				font-weight: bolder;
			}
			.el-pagination{
				width: 100%;
				margin-left: 18%;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal"
						@select="handleSelect">
					</el-menu>
					<div class="line"></div>
					<el-menu :default-active="activeIndex2" class="el-menu-demo nav" mode="horizontal"
						@select="handleSelect" background-color="" text-color="" active-text-color="#2d82a5">
						<el-menu-item index="4"><strong><img src="img/home.png" width="20"
									height="20">&nbsp<a href="http://niitcxl.cn" target="_blank" style="font-style: normal;text-decoration: none;">个人博客</a></strong></el-menu-item>
						<el-submenu index="2">
							<template slot="title"><strong><img src="img/databases.png" width="25" height="25">&nbsp;我的网盘</img></strong></template>
							<el-menu-item index="2-1" @click="work"><strong>电科院作业</strong></el-menu-item>
							<el-menu-item index="2-2" @click="good"><strong>编程</strong></el-menu-item>
							<el-menu-item index="2-3" @click="tool"><strong>工具</strong></el-menu-item>
							<el-menu-item index="2-4" @click="material"><strong>资料</strong></el-menu-item>
							<el-menu-item index="2-5" @click="funStuff"><strong>好玩的东西</strong></el-menu-item>
						</el-submenu>
						<el-menu-item index="3"><strong><img src="img/talk.png" width="20"
									height="20">&nbsp;<a href="message.html" target="_blank" style="font-style: normal;text-decoration: none;">留言板</a></strong></el-menu-item>
						<el-menu-item index="5"><strong><img src="img/admin.png" width="20" height="20">&nbsp;<a
									href="login.html">管理员登录</a></strong></el-menu-item>

					</el-menu>
				</el-header>
				<el-main>
					<div class="p1">
						<h1><img src="img/databases.png" width="40" height="40">&nbsp;个人网盘</h1>
					</div>
					<el-col :span="18">
						<template class="table">
							<el-table
								:data="tableData"
								style="width: 100%">
								<el-table-column label="序号" type="index">
								</el-table-column>
								<el-table-column label="文件名称" prop="fileName">
								</el-table-column>
								<el-table-column label="文件分类">
									<template slot-scope="scope">
										<div v-if="scope.row.fileType== '1'">
											电科院作业
										</div>
										<div v-else-if="scope.row.fileType=='2'">
											编程
										</div>
										<div v-else-if="scope.row.fileType=='3'">
											工具
										</div>
										<div v-else-if="scope.row.fileType=='4'">
											资料
										</div>
										<div v-else-if="scope.row.fileType=='5'">
											好玩的东西
										</div>
									</template>
								</el-table-column>
								<el-table-column label="文件简述" prop="fileDescription">
								</el-table-column>
								<el-table-column label="上传日期" prop="insertDate">
								</el-table-column>
								<el-table-column align="center">
									<template slot="header" slot-scope="scope">
										<el-input v-model="fileName" size="mini" placeholder="搜索文件" @blur="onChange" />
									</template>
									<template slot-scope="scope">
										<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteFile(scope.$index, scope.row)">
										</el-button>
										<el-button size="mini" @click="downFile(scope.$index, scope.row)">下载
										</el-button>

									</template>
								</el-table-column>
							</el-table>
						</template>
						<!-- 分页 -->
						<el-pagination
								:current-page="page"
								:page-size="pageSize"
								:total="total"
								style="padding: 30px 0; text-align: center"
								layout="total, prev, pager, next, jumper"
								@current-change="getAllFiles"
						/>
					</el-col>
				</el-main>
				<el-footer style="height:130px ;">
					<div>
						<div class="bottom_1">Copyright © 2022 - 2023 星龙 | Powered by Slef | Theme Awesome themes</div>
						<div>
							<a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1226242536"><img
									src="./img/qq.png"></a>
							<img src="./img/email.png">
							<img src="./img/github.png">
						</div>
						<div class="bottom_2">
							<a href="https://beian.miit.gov.cn/#/" style="font-style: normal"><img
									src="img/jingcha.png" />黔ICP备20000269号-2</a>
						</div>
					</div>
				</el-footer>
				<div class="kefu">
					<img src="img/kefu.png">
				</div>
			</el-container>


		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				activeIndex: '1',
				activeIndex2: '1',
				fileTypeId:"1",//当前页的分类
				downFilePath:"",//文件下载地址
				page:1,//当前页
				pageSize:5,//分页大小
				total:0,//总分页大小
				tableData: [],
				fileName: '',//搜索框查询的数据
			},
			methods: {
				handleSelect(key, keyPath) {
					// console.log(key, keyPath);
				},
				deleteFile(index,row){//文件删除的方法
					//console.log(row.fileId)
					//给用户做提示 的确认按钮
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {

						//调用接口删除文件
						axios.delete("/files/deleteByPath?fileId="+row.fileId).then(resp=>{
							if (resp.data.flag){
								this.$message({
									type:"success",
									message:"删除成功!"
								})
								//再次重新获取数据
								this.getAllFiles()
							} else {
								this.$message({
									type:"error",
									message:"不要乱删东西,要删先登录啊  0.0"
								})
							}

						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				
				},
				downFile(index, row) {//下载文件的方法
					this.$confirm('确定是否下载该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '正在下载中!请耐心等等....别着急额'
						});
						//把当前文件的下载地址赋值给数据模型
						this.downFilePath=row.filePath;
						//使用异步请求下载当前地址
						console.log(this.downFilePath)
						window.open(this.downFilePath)
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消下载'
						});
					});
				},
				work(){//点击作业的导航分类
					//设置文件分类
					this.fileTypeId="1"
					//再次调取所有文件的数据
					this.getAllFiles()
				},
				good(){//点击作业的导航分类
					//设置文件分类
					this.fileTypeId="2"
					//再次调取所有文件的数据
					this.getAllFiles()
				},
				tool(){//点击作业的导航分类
					//设置文件分类
					this.fileTypeId="3"
					//再次调取所有文件的数据
					this.getAllFiles()
				},
				material(){//点击作业的导航分类
					//设置文件分类
					this.fileTypeId="4"
					//再次调取所有文件的数据
					this.getAllFiles()
				},
				funStuff(){//点击作业的导航分类
					//设置文件分类
					this.fileTypeId="5"
					//再次调取所有文件的数据
					this.getAllFiles()
				},
				onChange(){
					//把输入表单的数据 再次请求后端 获取数据
                    this.getAllFiles()
				},
				getAllFiles(page = 1){//获取所有文件的方法
					this.page = page

					axios.get("/files/getFileTypePageCondition?TypeId="+this.fileTypeId+"&"+"page="+this.page+"&"+"pageSize="+this.pageSize+"&"+"fileName="+this.fileName
							).then(resp=>{
								//给表单列表赋值
						this.tableData=resp.data.data.list.records
						//给总页码赋值
						this.total=resp.data.data.list.total
						//console.log(resp.data)
					}).catch(error=>{
						this.$message.error('网络出错,请刷新页面重试');
					})
				}
			},
			mounted() {
				this.getAllFiles()
			}
		})
	</script>
</html>
